<template>
  <div id="tab-bar">
     <a href="javascript:;" class="tab-bar-item" :class="{'isActive':$route.path==='/msite'}" @click="GoTo('/msite')">
         <span class="item-icon">
            <i class="iconfont icon-shouye"></i>
         </span>
         <span>首页</span>
    </a>
     <a href="javascript:;" class="tab-bar-item" :class="{'isActive':$route.path==='/cargetor'}" @click="GoTo('/cargetor')">
         <span class="item-icon">
             <i class="iconfont icon-fenlei1"></i>
         </span>
         <span>分类</span>
     </a>
     <router-link class="tab-bar-item" to="/cart" :class="{'isActive':$route.path==='/cart'}">
         <span class="item-icon">
             <i class="iconfont icon-gouwuche"></i>
         </span>
          <span>购物车</span>
     </router-link>
     <router-link class="tab-bar-item" to="/profile" :class="{'isActive':$route.path==='/profile'}">
         <span class="item-icon">
             <i class="iconfont icon-wode"></i>
         </span>
         <span>我的</span>
     </router-link>
  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        GoTo(a){
            this.$router.push(a)
        }
    }

}

</script>
<style>
 #tab-bar{
     display:flex;
    background-color: #f6f6f6;
    position:fixed;
    left:0;
    right:0;
    bottom: 0;
    box-shadow: 0 -2px 1px rgba(100,100,100,.1);
     
 }
 .tab-bar-item{
     display: flex;
     
     flex:1;
     height:49px;
     text-align: center;
     flex-direction: column;
     align-items: center;
 }
 .item-icon{
     font-size: 22px;
    
 }
 span{
     font-size: 13px;
 }
 .isActive{
   color:red;
 }
</style>